import { themeSetting } from "@/settings/theme-settings"

type LayoutType = "vertical" | "classic" | "transverse" | "columns"

export interface ThemeType {
    // 是否深色主题
    dark: boolean
    // 主题色
    theme: string
    // 可选主题色列表
    themeList: string[]
    // 布局
    layout: LayoutType
    // 颜色反转
    inverted: boolean
    // 固定Header
    fixedHeader: boolean
    // 固定左边框
    fixedSider: boolean
    // 使用菜单选择卡
    useMultiTabs: boolean
    // 选择卡模式
    multiTabsMode: "card" | "bar" | "line"
    // 选择卡高度
    multiTabsHeight: number
    // 分隔菜单
    useModuleMenu: boolean
}

/**
 * 系统样式
 */
export const useThemeStore = defineStore("theme", () => {
    const setting = ref<ThemeType>()
    const [value, toggle] = useToggle()

    const setup = () => {
        setting.value = Object.assign({}, themeSetting)
    }

    return { setting, collapsed: value, toggleCollapse: toggle, setup }
})
